<script lang="ts" setup>
import { reactive, ref } from 'vue';
// typescript
const tabbar = ref([
  {title: "未使用", value: 1, count: 5},
  {title: "已使用", value: 2, count: 1},
  {title: "已过期", value: 3, count: 9}
]);
const state = reactive({
  active: 1
});

// tab切换
const onTabbarSwitch = (item: { title: string, value: number }) => {
  state.active = item.value;
}
</script>

<!-- 优惠券 -->
<template>
  <view class="container">
    <!-- 切换栏 -->
    <view class="custom-tabbar-header">
      <template v-for="(item, itemIndex) in tabbar" :key="itemIndex">
        <view :class="{ actived: state.active == item.value }" @click="onTabbarSwitch(item)">
          {{ item.title }}({{ item.count }})
        </view>
      </template>
    </view>
    <!-- 列表 -->
    <view class="coupon-list">
      <template v-for="(item, itemIndex) in 5" :key="itemIndex">
        <view class="item">
          <w-coupon-item :disabled="!!(itemIndex % 2)"></w-coupon-item>
        </view>
      </template>
    </view>
  </view>
</template>

<style scoped lang="scss">
// scss
.container {
  padding-top: 80rpx;
}

.coupon-list {
  padding: 30rpx;

  .item {
    margin-bottom: 20rpx;
  }
}
</style>
